<template>
	<view class="date-choose">
		<view class="left-box" v-if='showLeftBox'>
			<view class="left-content">
				<template v-if='useLeftSlot'>
					<slot></slot>
				</template>
				<template wx:else>
					<picker class="date-picker" mode="date" fields="month" :value='chooseItem.formatDateFull'
						@change='changeDatePicker'>
						<uni-icons type='calendar' color='#888' size='24'></uni-icons>
					</picker>
				</template>
			</view>
		</view>
		<swiper class="swiper-box" :current='currentIndex' @change='swiperChangeAction'
			@animationfinish='swiperAnimationFinishAction'>
			<swiper-item class="swiper-item" v-for='(item, index) in pageDataList' :key="index">
				<view class="group-box">
					<view class="group-item" v-for='(monthItem, monthIndex) in item' :key="monthItem.formatDateFull"
						:class='[getMonthItemSubClass(monthItem, chooseItem)]' @tap.stop="tapItemAction(monthItem)">
						<view class="title-1">{{getYearStr(monthItem) }}</view>
						<view class="title-2">{{getMonthStr(monthItem, language)}}</view>
						<view class="badge" v-if='showMonthBadgeData(monthItem, badgeData)'>
							{{getMonthBadgeData(monthItem, badgeData)}}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const {
		MonthItem,
		getForwardMonthListData,
		getBackwardMonthListData,
		getHalfYearData
	} = require("./tab-choose-month-service");
	import cuTabChooseDateMixin from "../common/cu-tab-choose-date/mixins";
	export default {
		mixins: [cuTabChooseDateMixin],
		data: function() {
			return {

			}
		},
		methods: {
			/**
			 * 初始化列表数据
			 * @param {Date} date 
			 * need reload 需要重载方法
			 */
			initPageDataList(date) {
				if (!date) date = new Date();
				// 本周
				let currentMonthItem = getHalfYearData(date)
				// 若干后续月
				let forwardMonthList = getForwardMonthListData(date);
				// 若干之前月
				let backwardMonthList = getBackwardMonthListData(date);
				// 初始化MonthList
				this.pageDataList = [...backwardMonthList, currentMonthItem, ...forwardMonthList];
				// 索引归中
				this.currentIndex = backwardMonthList.length;
			},

			/**
			 * 设置选中数据
			 * @param {Date} date 
			 * need reload 需要重载方法
			 */
			setChooseItemByDate(date) {
				this.chooseItem = new MonthItem(date);
			},

			/**
			 * 获取未来数据
			 * need reload 需要重载方法
			 */
			getForwarListData() {
				let newestHalfYearList = this.pageDataList[this.pageDataList.length - 1]; // 获取最后一月数据
				let forwardMonthList = getForwardMonthListData(newestHalfYearList[0].date); // 获取 未来几月数据列表
				return forwardMonthList;
			},

			/**
			 * 获取过去数据
			 * need reload 需要重载方法
			 */
			getBackwardListData() {
				let oldestHalfYearList = this.pageDataList[0]; // 获取最早一月数据
				let backwardMonthList = getBackwardMonthListData(oldestHalfYearList[0].date); // 获取 之前几月数据列表
				return backwardMonthList;
			},

			/**
			 * 根据月份的状态和选中情况生成对应的CSS类名
			 * @param {Object} monthItem - 包含月份信息的对象，需要包含monthStatus和formatDate属性
			 * @param {Object} chooseMonthItem - 当前选中的月份对象，需要包含formatDate属性
			 * @returns {String} - 返回生成的CSS类名字符串
			 */
			getMonthItemSubClass: function(monthItem, chooseMonthItem) {
				// 从monthItem对象中解构出monthStatus和formatDate属性
				const {
					monthStatus,
					formatDate
				} = monthItem || {};

				// 从chooseMonthItem对象中解构出formatDate属性，并重命名为chooseMonthItemFormatDate
				const {
					formatDate: chooseMonthItemFormatDate
				} = chooseMonthItem || {};

				// 初始化结果字符串
				var result = '';

				// 根据monthStatus的值设置基础类名
				if (monthStatus == -1) {
					result = 'pass-item'; // 过去月份的类名
				} else if (monthStatus == 1) {
					result = 'future-item'; // 未来月份的类名
				} else {
					result = 'current-item'; // 当前月份的类名
				}

				// 如果当前月份是选中的月份，添加选中类名
				if (chooseMonthItem && formatDate == chooseMonthItemFormatDate) {
					result = result + " " + "choose-item"; // 添加选中状态的类名
				}

				// 返回最终组合的类名字符串
				return result;
			},
			/**
			 * 从月份对象中获取年份字符串
			 * @param {Object} monthItem - 包含月份信息的对象，需要包含year属性
			 * @returns {String} - 返回年份字符串
			 */
			getYearStr: function(monthItem) {
				// 从monthItem对象中解构出year属性
				const {
					year
				} = monthItem || {}

				// 返回年份字符串
				return year;
			},
			/**
			 * 根据语言参数将月份英文缩写转换为对应中文月份名称
			 * @param {Object} monthItem - 包含月份信息的对象
			 * @param {string} language - 语言标识，'zh'表示中文
			 * @returns {string} 返回中文月份名称或原始英文月份缩写
			 */
			getMonthStr: function(monthItem, language) {
				// 从monthItem对象中解构出month属性
				const {
					month
				} = monthItem || {}
				// 判断语言是否为中文
				if (language == 'zh') {
					// 将英文月份缩写转换为对应的中文月份名称
					if (month == 'Jan') {
						return "一月"
					} else if (month == 'Feb') {
						return "二月"
					} else if (month == 'Mar') {
						return "三月"
					} else if (month == 'Apr') {
						return "四月"
					} else if (month == 'May') {
						return "五月"
					} else if (month == 'Jun') {
						return "六月"
					} else if (month == 'Jul') {
						return "七月"
					} else if (month == 'Aug') {
						return "八月"
					} else if (month == 'Sep') {
						return "九月"
					} else if (month == 'Oct') {
						return "十月"
					} else if (month == 'Nov') {
						return "十一月"
					} else if (month == 'Dec') {
						return "十二月"
					}
				}
				// 如果不是中文，直接返回原始英文月份缩写
				return month;
			},
			/**
			 * 检查指定月份是否有徽章数据
			 * @param {Object} monthItem - 月份对象，包含formatDate属性
			 * @param {Object} badgeData - 徽章数据对象，以日期为键存储数据
			 * @returns {Boolean} 如果有徽章数据则返回true，否则返回false
			 */
			showMonthBadgeData: function(monthItem, badgeData) {
				const {
					formatDate
				} = monthItem || {}
				// 如果没有徽章数据，直接返回false
				if (!badgeData) return false;
				// 根据月份的formatDate属性从badgeData中获取对应的数据
				var result = badgeData[formatDate];
				// 检查结果是否为null或undefined，如果不是则返回true
				return result !== null && result !== undefined;
			},
			/**
			 * 获取指定月份的徽章数据，并进行格式化处理
			 * @param {Object} monthItem - 月份对象，包含formatDate属性
			 * @param {Object} badgeData - 徽章数据对象，以日期为键存储数据
			 * @returns {String} 返回格式化后的徽章数据，如果没有数据则返回空字符串
			 */
			getMonthBadgeData: function(monthItem, badgeData) {
				// 从monthItem对象中解构出formatDate属性
				const {
					formatDate
				} = monthItem || {}

				// 如果没有徽章数据，直接返回空字符串
				if (!badgeData) return '';

				// 根据formatDate从badgeData中获取对应的数据
				var result = badgeData[formatDate];

				// 检查结果是否有效（非null且非undefined）
				if (result !== null && result !== undefined) {
					// 如果结果大于99，显示"99+"
					if (parseInt(result) > 99) {
						return "99+"
					} else {
						// 否则返回原始结果
						return result;
					}
				} else {
					// 如果没有数据，返回空字符串
					return '';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/cu-tab-choose-date/styles.scss";
</style>